import React ,{useState} from 'react'
import HocLogin from "../../utils/HocLogin"
import {useSelector,useDispatch} from "react-redux"
import { ProductCard, SubmitBar, Checkbox ,Button ,Image,} from 'react-vant';
import * as api from "../../api/index"
import My_dialog from '../../components/My_dialog';


function ShopCar() {
  const dispatch = useDispatch()
  const [visible, setVisible] = useState(false);
  const [dialog_value,setDialog_value] =useState ({})

  const [str,setStr] = useState("")
  const shop_car = useSelector(state=>state.reducer.shopCar)
  const All_checked = useSelector(state=>state.reducer.All_checked)
  const ALL_price = useSelector(state=>state.reducer.ALL_price)

  // 购物车++
  const add_shopcar_count = (item) => {
    dispatch(api.add_shopcar_count(item))
  }
  //购物车 -- 
  const del_shopcar_count = (item) =>{
    if (item.count <= 1) {
      console.log("删除");
      //当数量小于1或等于1 显示删除弹框
      setStr("确认要删除该商品吗")
      setDialog_value(item)
      setVisible(true)
    }else {
      dispatch(api.del_shopcar_count(item))
    }
  }

  // 弹框确认函数
  const onConfirm = () =>{
    //将来要在这个函数中删除商品
    setVisible(false);
    if (str === "确认要删除该商品吗") {
      dispatch(api.del_shopcar(dialog_value))
    }else{
      console.log("全部删除");
      dispatch(api.All_del_shopcar())
    }

  }

  // 弹框取消函数
  const onCancel = () => {
    setVisible(false);
  }

  //单选
  const set_shopcar_checked = (item,index) =>{
    dispatch(api.set_shopcar_checked(item))
  
  }
  // 全选
  const all_shopcar_checked = (checked) =>{
    dispatch(api.all_shopcar_checked(checked))
  }

  //全部删除
  const ALL_del_shopcar = () =>{
    setVisible(true)
    setStr("确认要删除勾选商品吗")
  }

  let my_dialog = {
    visible,
    onCancel,
    onConfirm,
    str
  }
  return (
    <div className='shopcar'>
      <header>
          <div></div>
          <div>shopcar</div>
          <Button color='red' size="mini" round plain  onClick={ALL_del_shopcar}>
            全部删除
          </Button>
      </header>
      <main>
        <div className='shopcar_count'>
        {
          shop_car&&shop_car.length>0?shop_car.map((item,index)=>{
            return  <ProductCard
              key={index}
              num={item.count}
              price={item.price}
              desc={item.type}
              title={item.title}
              thumb={
                <div style={{display:"flex"}}>
                   <Checkbox checked={item.checked} onChange={()=>set_shopcar_checked(item,index)} shape="square" name="c1"/>
                  <Image lazyload src={item.img}/>
                </div>
              }
              footer={
                <>
                  <Button size="mini" round plain style={{ marginRight: 2 }} onClick={()=>del_shopcar_count(item)}>
                    ---
                  </Button>
                  <Button size="mini" round plain onClick={()=>add_shopcar_count(item)}>
                    +++
                  </Button>
                </>
              }
            />
          }):"没有购物车数据"
        }
        </div>
        
      </main>
      
      <div className="demo-submit-bar">
        <SubmitBar
          price={ALL_price*100}
          buttonText="提交订单"
        >
          <Checkbox checked={All_checked} onChange={all_shopcar_checked}>全选</Checkbox>
        </SubmitBar>
      </div>
      <My_dialog {...my_dialog}></My_dialog>
    </div>
  )
}

export default  HocLogin(ShopCar)
